<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
    <title>3D中国地图</title>
    <script
      type="application/javascript"
      src="../static/plugins/jquery/jquery.js"
    ></script>
    <script
      type="application/javascript"
      src="../static/plugins/echarts/echarts.min.js"
    ></script>
    <script
      type="application/javascript"
      src="../static/plugins/echarts/echarts-gl.js"
    ></script>
    <script
      type="application/javascript"
      src="../static/plugins/echarts/china.js"
    ></script>
    <style>
      .main {
          width: 1000px;
          height: 800px;
          margin: 0 auto;
          position: relative;
      }

      .main>canvas {
          position: absolute;
          z-index: 6;
          opacity: 0.5;
          transform: rotateX(60deg);
      }

      .main>canvas:nth-of-type(1) {
          left: 275px;
          top: 330px;
      }

      .main>canvas:nth-of-type(2) {
          left: 721px;
          top: 259px;
      }

      .main>canvas:nth-of-type(3) {
          left: 629px;
          top: 365px;
      }

      .main>canvas:nth-of-type(4) {
          left: 602px;
          top: 514px;
      }

      .main>canvas:nth-of-type(5) {
          left: 701px;
          top: 483px;
      }

      .box {
          width: 1000px;
          height: 800px;
          position: absolute;
      }
    </style>
  </head>
  <body>
    <div id="main" class="main">
      <canvas class="canvas"></canvas>
      <canvas class="canvas"></canvas>
      <canvas class="canvas"></canvas>
      <canvas class="canvas"></canvas>
      <canvas class="canvas"></canvas>
      <div id="box" class="box"></div>
    </div>

    <script>
      $(function () {
        let canvas = document.querySelectorAll(".canvas");
        console.log(canvas);
        let radius = 0;
        for (let i = 0; i < canvas.length; i++) {
          let ctx = canvas[i].getContext("2d");
          canvas[i].width = 70;
          canvas[i].height = 70;

          var testtimer = setInterval(function () {
            render(ctx, canvas[i]);
          }, 100);
        }

        function drawCircle(ctx) {
          ctx.beginPath();
          ctx.arc(35, 35, radius, 0, Math.PI * 2);
          ctx.closePath();
          ctx.lineWidth = 2;
          ctx.strokeStyle = "rgba(255,255,50,1)";
          ctx.stroke();

          radius += 0.5;
          if (radius > 30) {
            radius = 0;
          }
        }

        function render(ctx, canvas) {
          var prev = ctx.globalCompositeOperation;
          ctx.globalCompositeOperation = "destination-in";
          ctx.globalAlpha = 0.95;
          ctx.fillRect(0, 0, canvas.width, canvas.height);
          ctx.globalCompositeOperation = prev;
          drawCircle(ctx);
        }
      });
    </script>

    <script>
      $(function () {
        //初始化echarts实例
        var myChart = echarts.init(document.getElementById("box"));

        var geoData = [
          {
            name: "西部战区",
            value: (Math.random() * 500).toFixed(2),
          },
          {
            name: "北部战区",
            value: (Math.random() * 500).toFixed(2),
          },
          {
            name: "中部战区",
            value: (Math.random() * 500).toFixed(2),
          },
          {
            name: "东部战区",
            value: (Math.random() * 500).toFixed(2),
          },
          {
            name: "南部战区",
            value: (Math.random() * 500).toFixed(2),
          },
        ];

        var geoCoordMap = {
          西部战区: [90.68, 36.77],
          北部战区: [124.63, 43.75],
          中部战区: [115.48, 34.03],
          东部战区: [117.96, 25.86],
          南部战区: [112, 24.21],
          西藏: [91.11, 30.97],
          上海: [121.48, 31.22],
          福建: [118.1, 27.46],
          浙江: [119.96, 29.86],
          广东: [113.23, 24.16],
          山西: [112.53, 38.87],
          云南: [101.73, 25.04],
          辽宁: [123.38, 42.8],
          吉林: [125.35, 44.88],
          江西: [115.89, 28.68],
          海南: [109.51, 20.25],
          广西: [108.74, 24.16],
          内蒙古: [111.65, 42.42],
          四川: [104.06, 31.67],
          陕西: [108.95, 35.27],
          江苏: [119.78, 33.04],
          贵州: [106.71, 27.57],
          北京: [116.46, 41.92],
          新疆: [86.68, 41.77],
          山东: [118, 36.65],
          甘肃: [103.73, 37.03],
          天津: [117.2, 40.13],
          湖北: [113.65, 34.76],
          黑龙江: [127.63, 47.75],
          河北: [115.48, 40.03],
          湖南: [112, 28.21],
          安徽: [117.27, 32.86],
          湖北: [112.31, 31.52],
          青海: [97.31, 37.03],
          重庆: [107.31, 30.52],
          宁夏: [106.31, 38.52],
          香港: [114.31, 23.02],
          澳门: [114.01, 22.52],
          台湾: [120.81, 25.02],
        };

        var convertData = function (data) {
          var res = [];
          for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
              res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value),
              });
            }
          }
          console.log(res);
          return res;
        };

        //设置3D地图参数
        option = {
          tooltip: {
            show: true,
          },

          visualMap: [
            {
              type: "continuous",
              show: false,
              seriesIndex: 0,
              text: ["bar3D"],
              calculable: true,
              max: 300,
              inRange: {
                color: ["#87aa66", "#eba438", "#d94d4c", "#c71585", "#21AEF8"],
              },
            },
          ],

          geo3D: {
            map: "china",
            roam: true,
            // 配置为垂直渐变的背景
            environment: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "#00aaff", // 天空颜色
                },
                {
                  offset: 0.7,
                  color: "#998866", // 地面颜色
                },
                {
                  offset: 1,
                  color: "#998866", // 地面颜色
                },
              ],
              false
            ),

            itemStyle: {
              color: "#1d5e98",
              borderWidth: 0.4,
              borderColor: "#000",
              opacity: 1,
            },
            label: {
              show: false, //是否显示标签
              textStyle: {
                //标签的样式设置
                color: "#f00", //地图初始化区域字体颜色
                fontSize: 8,
                opacity: 1,
                backgroundColor: "rgba(0,23,11,0)",
              },
            },
            emphasis: {
              //当鼠标放上去  地区区域是否显示名称
              itemStyle: {
                color: "#1d5e98",
              },
            },
            shading: "lambert", //光照带来的明暗
            light: {
              //光照相关设置，在shading为 'color'的时候无效
              main: {
                //场景主光源的设置
                color: "#fff", //光照颜色
                intensity: 1.2, //光照强度
                shadowQuality: "high", //阴影亮度
                shadow: false, //是否显示阴影
                alpha: 60, //主光源绕 x 轴偏离的角度
                beta: 190, //主光源绕 y 轴偏离的角度
              },
              ambient: {
                //全局的环境光设置
                intensity: 0.3,
              },
            },
          },

          series: [
            {
              name: "bar3D",
              type: "bar3D",
              coordinateSystem: "geo3D",
              barSize: 1.5, //柱子粗细
              minHeight: 9, //柱子的最小高度
              //shading: 'lambert',
              bevelSize: 0.7,
              bevelSmoothness: 10,
              zlevel: 1,
              label: {
                show: false,
                formatter: "{b}",
              },
              itemStyle: {
                color: ["#c23531", "#2f4554", "#61a0a8", "#c4ccd3"],
              },
              data: convertData(geoData),
            },
          ],
        };

        myChart.setOption(option);

        myChart.on("mousemove", function () {});
      });
    </script>
  </body>
</html>
